<template>
  <div>
    <el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="500px" append-to-body>
      <el-form ref="initializePrefixGoodsServiceFormRef" :model="form" :rules="state.rules" label-width="80px">
        <el-form-item label="服务名称" prop="title">
          <el-input v-model="form.title" placeholder="请输入服务名称" />
        </el-form-item>
        <el-form-item label="服务说明">
<!--          <editor v-model="form.content" :min-height="192"/>-->
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="商户ID" prop="merchantId">
          <el-input v-model="form.merchantId" placeholder="请输入商户ID" />
        </el-form-item>
        <el-form-item label="应用ID" prop="AppID">
          <el-input v-model="form.AppID" placeholder="请输入应用ID" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createdTime">
          <el-input v-model="form.createdTime" placeholder="请输入创建时间" />
        </el-form-item>
        <el-form-item label="修改时间" prop="updatedTime">
          <el-input v-model="form.updatedTime" placeholder="请输入修改时间" />
        </el-form-item>
        <el-form-item label="删除时间" prop="deletedTime">
          <el-input v-model="form.deletedTime" placeholder="请输入删除时间" />
        </el-form-item>
        <el-form-item label="是否删除" prop="isDeleted">
          <el-input v-model="form.isDeleted" placeholder="请输入是否删除" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="state.buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {nextTick, reactive, ref, toRefs} from "vue";
import { getInitializePrefixGoodsService,addInitializePrefixGoodsService, updateInitializePrefixGoodsService } from "@/leadMall/api/initializePrefixGoodsService";
import { ElForm, ElMessage} from "element-plus";
import {InitializePrefixGoodsServiceForm,InitializePrefixGoodsServiceVO} from '@/leadMall/api/initializePrefixGoodsService/types';
const initializePrefixGoodsServiceFormRef = ref(ElForm as any);
const state = reactive({
  form: {} as any,
  rules:{},
  buttonLoading:false,
  dialog:{
    visible: false,
    title: ''
  }
});

const {form } = toRefs(state);
// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);

const reset = () => {
  form.value = {...initFormData};
  initializePrefixGoodsServiceFormRef.value?.resetFields();
}
const initDialog = (type: string,row?: InitializePrefixGoodsServiceVO) => {
  if(type==="add"){
    state.dialog.title = "添加服务";
    nextTick(() => {
      reset();
    });
  }else{
    state.dialog.title = "修改【请填写功能名称】";
    nextTick(async () => {
      reset();
      const _id = row?.id as number;
      const res = await getInitializePrefixGoodsService(_id);
      Object.assign(form.value, res.data);
    });
  }
};

const openDialog = async (type: string, row: InitializePrefixGoodsServiceVO) => {
  initDialog(type, row);
  state.dialog.visible = true;
};
// 暴露变量
defineExpose({
  openDialog
});
const cancel = () => {
  state.dialog.visible = false;
  emit("refresh"); /* 刷新表格 */
}
const submitForm = () => {
  state.buttonLoading = true;
  initializePrefixGoodsServiceFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      let res;
      let message;
      if (form.value.id) {
        res = await updateInitializePrefixGoodsService(form.value)
        message = "修改成功"
      } else {
        res = await addInitializePrefixGoodsService(form.value)
        message = "新增成功";
      }
      if (res.code === 200) {
        ElMessage.success(message);
        cancel();
      }else{
        ElMessage.error(res.msg);
      }
    }
  });
  state.buttonLoading = false
}
const initFormData: InitializePrefixGoodsServiceForm = {
  id: undefined,
  title: undefined,
  content: undefined,
  sort: undefined,
  status: undefined,
  merchantId: undefined,
  AppID: undefined,
  createdTime: undefined,
  updatedTime: undefined,
  deletedTime: undefined,
  isDeleted: undefined
}
</script>
